<template>
	<div id="audition_turn_class" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		 
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				转班（{{student.realName}}）
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row">
					<label class="label">
						<span style="color: red;">*</span>
						班级名称
					</label>
					<el-select style="width: 3.3rem;" v-model="param.classId" id="classId"
							@change="auditionChange" placeholder="班级名称">
					    <el-option-group v-for="group in auditionOptions"
					    				 :key="group.type" :label="group.type">
						    <el-option v-for="item in group.list" :key="item.classId" :value="item.classId"
						        	   :label="item.className" :disabled="item.disable">
						     </el-option>
					    </el-option-group>
				  	</el-select>
				</div>
				
				<div class="row">
					<label class="label">上课时间</label>
					<el-date-picker style="width: 1.6rem;" v-model="classDate" value-format="yyyy-MM-dd"
					    			type="date" placeholder="上课日期" :clearable="false" id="classDate"
					    			@change="dateChange" :picker-options="pickerOptions">
				 	</el-date-picker>&nbsp;
				 	
				 	<el-select style="width: 1.6rem;" v-model="param.classSyllabusId"
							    id="classSyllabusId" placeholder="上课时间段">
					    <el-option v-for="item in syllabusList" :key="item.classSyllabusId"
					      		   :label="item.time" :value="item.classSyllabusId">
					    </el-option>
				  	</el-select>
				</div>
				
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			
			student : {},
			auditionList : [],
			syllabusMap : {},
			syllabusList : [],
			param : {
				classStudentId : "",
				clueId : "",
				classId : "",
				classSyllabusId : "",
			},
			classDate : null,
			 //日期有效性计算
	        pickerOptions : {
				disabledDate : function(date) {
					date = tool.DateToString(date,"yyyy-MM-dd");
					return (vm.syllabusMap[date]? false : true);
				}
			},
		}
	},
	computed : {
		auditionOptions : function() {
			var options = [
				{type : "线下试听", list : []},
			 	{type : "线上试听", list : []}
			];
			var now = tool.DateToString(new Date(), "yyyy-MM-dd HH:mm");
			
			this.auditionList.forEach(function(item) {
				//根据有没有课节判断,加入到选项中
				let s = item.nearTrialClassSyllabus;
				if(s && s.endTime > now) {
					var index = (item.classTypeMode == 1? 0 : 1);
					options[index].list.push(item);
				}
			});
			return options;
		},
		syllabus : function() {
			var syllabus = null;
			var v = this;
			v.syllabusList.forEach(function(item) {
				if(item.classSyllabusId == v.param.classSyllabusId) {
					syllabus = item;
					return false;
				}
			});
			return syllabus;
		}
	},
	methods : {
		init : function(student) {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			//初始化数据
			vm.student = student;
			
			vm.syllabusMap = {};
			vm.syllabusList = [];
			vm.classDate = null;
			
			vm.param = {
				classStudentId : student.classStudentId,
				clueId : student.clueId,
				classId : "",
				classSyllabusId : ""
			}
			
			api.auditionList({campusId : vm.$store.state.campusId}).then(function(data) {
				vm.auditionList = data.list;
			});
			
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		sure : function() {
			//验证规则
			var rules = [{
				judge : vm.param.classId,
				focus : $("#audition_turn_class #classId"),
				tips : "请选择试听班级"
			},{
				judge : vm.classDate,
				focus : $("#audition_turn_class #classDate"),
				tips : "请选择上课日期"
			},{
				judge : vm.param.classSyllabusId,
				focus : $("#audition_turn_class #classSyllabusId"),
				tips : "请选择上课时间段"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			api.auditionStuUpdate({list:[vm.param], _wait:""}).then(function(data) {
				vm.$emit("callback");
				tool.message({type:"success", message:"转班成功", showClose: true});
				vm.cancel();
			})
			
		},
		auditionChange : function() {
			//试听班级改变,清空日期和课节选择,清空课节列表
			vm.classDate = "";
			vm.param.classSyllabusId = "";
			vm.syllabusList = [];
			
			//重新获取课节数据
			var param = {
				classId : vm.param.classId,
//				startTime : tool.DateToString(new Date(),"yyyy-MM-dd HH:mm:ss")
			};
			api.auditionSyllabus(param).then(function(data) {
				//解析日期课节映射
				vm.syllabusMap = vm.getSyllabusMap(data.list);
			});
		},
		getSyllabusMap : function(list) {
			var m = {};
			var now = tool.DateToString(new Date(),"yyyy-MM-dd HH:mm");
			list.forEach(function(item){
				//已结课,忽略
				if(now > item.endTime) {
					return;					
				}
				//排除学生当前所处的课节
				if(item.classSyllabusId == vm.student.classSyllabusId) {
					return;
				}
				//截取时间段
				item.time = item.startTime.substring(11,16) + " - "+ item.endTime.substring(11,16);
				//截取日期,作为key
				var k = item.startTime.substring(0,10);
				if(m[k] == null) {
					m[k] = [];
				}
				m[k].push(item);
			});
			return m;
		},
		dateChange : function() {
			//获取课节列表
			vm.syllabusList = vm.syllabusMap[vm.classDate];
			vm.param.classSyllabusId = "";
		}
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
	}
}
</script>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped>
	.panel {
		width: 5.5rem;
	}
	.radio {
		display: block;
	}
	.radio_group {
		line-height: 0.3rem;
		padding-left: 1.1rem;
	}
	
	.form {
		padding: 0 0.3rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		padding-top: 0.2rem;
	}
	.label {
		min-width: 0.85rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.1rem;
	}
</style>